<template>
  <div ww3 auto>
    <div class="feed-btn" flex>
      <el-button type="primary" @click="dialogFormVisible = true">
        绑定支付宝
      </el-button>
    </div>

    <el-card class="box-card">
      <div class="sale-table" auto="">
        <el-table
          :data="tableData"
          style="width: 100%"
          height="auto"
          :default-sort="{ prop: 'date', order: 'descending' }"
        >
          <!--          <el-table-column
                        type="selection"
                        width="55">
                    </el-table-column>-->

          <el-table-column prop="date" label="提现时间">
            2021-10-09 13:47:45
          </el-table-column>

          <el-table-column prop="date" label="金额"> 100元 </el-table-column>

          <el-table-column prop="city" label="状态"> 提现成功 </el-table-column>

          <el-table-column prop="date2" label="操作">
            <el-button type="text">详情</el-button>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <div flex ww1 style="justify-content: center">
      <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" @current-change="currentChange">
      </el-pagination>
    </div>

    <el-dialog
      title="绑定账号"
      :visible.sync="dialogFormVisible"
      class="show"
      width="46%"
    >
      <div
        ww1
        flex
        clum
        flex-c
        style="height: 200px; justify-content: space-around"
      >
        <p fz-14 ww1>
          请提供与认证或实名验证主体一致的支付宝账号，并确认账号可用性，姓名或主体不匹配将无法提现
        </p>
        <el-input
          v-model="zfbValue"
          placeholder="请输入支付宝账号"
          style="width: 50%"
        ></el-input>

        <div>
          <el-button
            type="primary"
            disabled
            style="padding: 12px 70px !important"
            >提交</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import $http from "@/api/info/info"
export default {
  name: "OrderInvoice",
  data() {
    return {
      zfbValue: '',
      pageSize: 10, 
      pageNum: 1,
      total: 0,
      dialogFormVisible: false,
      tableData: [
        {
          date: "100",
          name: "https://pic.vjshi.com/2021-01-27/0438e08167daaf27ab262ce1f61393ef/online/main.jpg?x-oss-process=style/resize_w_285",
          province: "炫酷",
          city: "3000",
          address: "45",
          zip: 203,
          date2: "2021-11-01",
          per: "黄千惠",
          card: "450***********23",
          satus: 1,
        },
      ],
    };
  },
  mounted() {
    this.withdrawPage();
  },
  methods: {
    change() {
      this.$router.push({
        name: "VatInvoice",
      });
    },
    currentChange(val) {
      this.pageNum = val;
      this.withdrawPage();
    },
    /***
     * 获取提现记录
     */
    withdrawPage() {
      let data = {
        userId: sessionStorage.getItem('userId')
      }
      let page = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      }
      $http.withdrawPage(page, data).then(res => {
        console.log('获取提现记录',res);
        this.total = res.total;
        this.list = res.rows;
      })
    }
  },
};
</script>

<style scoped>
.sale-table {
  width: 76%;
}
.box-card {
  margin: 2% auto;
}
</style>
